<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div style="text-align: center;line-height: normal">
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="test-table-demoReload" placeholder="按照用户名字搜索"
                           autocomplete="off">
                </div>

                <div class="layui-inline">
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户类型</label>
                            <div class="layui-input-inline">
                                <select id="type" name="type">
                                    <option value="-1">全部</option>
                                    <option value="1">注册用户</option>
                                    <option value="2">游客用户</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin search" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i><span>搜索</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="t" lay-filter="t"></table>
        </div>
    </div>
</div>
</body>
<script>
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;

    form.render('select');
    table.render({
        elem: '#t',
        id: 'tt',
        toolbar: '#tb',
        url: '/users/selectUsers',
        cols: [[
            {fixed: 'left', field: '', title: '序号', width: 70, type: 'numbers', align: 'center'},
            {field: 'uname', title: '名字', width: 200, align: 'center',},
            {field: 'utel', title: '账号', width: 200, align: 'center',},
            {field: 'uaddress', title: '地址', width: 400, align: 'center',},
            {field: 'uaddress', title: '用户类别', width: 200, align: 'center',templet:function (d) {
                    return d.type==1 ? "<span style='color: red'>注册用户</span>" : "<span style='color: grey'>游客用户</span>";
                }},
            {field: 'createTime', title: '注册时间', width: 200, align: 'center',sort:true},
            // {fixed: 'right', toolbar: '#caozuo', title: '操作', width: 200, align: 'center'}
        ]],
        page: true,
        page: {
            curr: layui.data("thaitrade_user_page").index
        },
        done: (res, curr, count) => {
            layui.data("thaitrade_user_page", {
                key: 'index',
                value: curr
            });
        }
    });

    // table.on('edit(t)', function (obj) {
    //     var value = obj.value //得到修改后的值
    //         , data = obj.data //得到所在行所有键值
    //         , field = obj.field; //得到字段
    //     layer.confirm("确定修改成:" + value + "?", ["确定", "取消"],
    //         function () {
    //             $.ajax({
    //                 url: '/kefu/edit',
    //                 data: {id: data.id, columName: field, value: value},
    //                 success: function (data) {
    //                     if (data.code == 200) {
    //                         layer.msg("编辑成功", {icon: 1, time: 1000});
    //                     } else {
    //                         layer.msg(data.data, {icon: 2, time: 1500});
    //                         var page = $(".layui-laypage-em").next().html();
    //                         table.reload('tt', {
    //                             where: {
    //                                 kefuName: $("#test-table-demoReload").val(),
    //                                 status: $("#status").val(),
    //                             },
    //                             page: {curr: page}
    //                         });
    //                     }
    //                 }
    //             })
    //         },
    //         function () {
    //             var page = $(".layui-laypage-em").next().html();
    //             table.reload('tt', {
    //                 where: {
    //                     kefuName: $("#test-table-demoReload").val(),
    //                     status: $("#status").val(),
    //                 },
    //                 page: {curr: page}
    //             });
    //         });
    // });

    // $('.test-table-operate-btn .layui-btn').on('click', function () {
    //     var type = $(this).data('type')
    //     active[type] ? active[type].call(this) : ''
    // })

    //    右侧按钮的的监听事件
    // table.on('tool(t)', function (obj) {
    //     var getdata = obj.data //获得当前行数据
    //     var layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    //     var tr = obj.tr //获得当前行 tr 的 DOM 对象（如果有的话）
    //     switch (layEvent) {
    //         case 'qiyong':
    //             layer.confirm("确定要启用该客服?", ["确定", "取消"], function () {
    //                 $.ajax({
    //                     url: '/kefu/updateStatus',
    //                     data: {id: getdata.id, status: 1},
    //                     success: function (data) {
    //                         if (data.code == 200) {
    //                             layer.msg("启用成功", {icon: 1, time: 1000}, function () {
    //                                 location.reload()
    //                             });
    //                         } else {
    //                             layer.msg(data.msg, {icon: 1, time: 1000});
    //                         }
    //                     }
    //                 })
    //             });
    //             break;
    //         case 'jinyong':
    //             layer.confirm("确定要禁用该客服?", ["确定", "取消"], function () {
    //                 $.ajax({
    //                     url: '/kefu/updateStatus',
    //                     data: {id: getdata.id, status: 0},
    //                     success: function (data) {
    //                         if (data.code == 200) {
    //                             layer.msg("禁用成功", {icon: 1, time: 1000}, function () {
    //                                 location.reload()
    //                             });
    //                         } else {
    //                             layer.msg(data.msg, {icon: 1, time: 1000});
    //                         }
    //                     }
    //                 })
    //             });
    //             break;
    //         case "reset":
    //             layer.confirm("确定将密码重置为123456吗?", ["确定", "取消"], function () {
    //                 $.ajax({
    //                     url: '/kefu/edit',
    //                     data: {id: getdata.id, columName: "password", value: "123456"},
    //                     success: function (data) {
    //                         if (data.code == 200) {
    //                             layer.msg("重置成功", {icon: 1, time: 1000}, function () {
    //                                 location.reload()
    //                             });
    //                         } else {
    //                             layer.msg(data.msg, {icon: 2, time: 1000});
    //                         }
    //                     }
    //                 })
    //             });
    //             break;
    //     }
    // });

    function search() {
        var text = $('#test-table-demoReload').val();
        var type = $("#type").val();
        table.reload('tt', {
            url: '/users/selectUsers',
            where: {
                uname: text,
                type: type
            },
            page: {
                curr: 1
            }
        })
    }

    //搜索
    $('.search').on('click', function () {
        search();
    });

    // 关键词搜索框添加绑定回车函数
    $('#test-table-demoReload').bind('keypress', function (event) {
        search();
    });


</script>
</html>